<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>阿福易购-首页</title>
    <link rel="stylesheet" href="/css/app.css">
</head>
<body class="ui-search-page" ontouchstart="">
<section class="J-header af-header-searchbar ui-searchbar-wrap focus">
        <i ontouchstart="window.history.back();" class="ui-icon-return"></i>
        <div class="ui-searchbar ui-border-radius">
            <i class="ui-icon-search"></i>
            <div class="ui-searchbar-input"><input class="keyword" value="" autofocus="autofocus" type="text" placeholder="搜索你想要的商品" autocapitalize="off"></div>
            <i class="ui-icon-close"></i>
        </div>
        <button class="ui-searchbar-submit">搜索</button>
</section>

<div class="ui-container">
    <section class="ui-search-label ui-panel">
        <h2 class="af-border-b">热搜</h2>
        <div class="ui-label-list">
            <label onclick="window.location.href='./search-result.html'" class="ui-label">护肤水</label>
            <label onclick="window.location.href='./search-result.html'" class="ui-label">婴儿奶粉</label>
            <label onclick="window.location.href='./search-result.html'" class="ui-label">苹果6</label>
            <label onclick="window.location.href='./search-result.html'" class="ui-label">彩妆</label>
            <label onclick="window.location.href='./search-result.html'" class="ui-label">宝马</label>
        </div>
    </section>
    <section class="ui-search-label ui-panel">
        <h2>历史搜索</h2>
        <ul class="J-history ui-list ui-list-pure af-border-tb af-hide">
<!--            <li onclick="window.location.href='./search-result.html'">
                <h4>护肤水</h4>
            </li>
            <li onclick="window.location.href='./search-result.html'" class="af-border-t">
                <h4>婴儿奶粉</h4>
            </li>
            <li onclick="window.location.href='./search-result.html'" class="af-border-t">
                <h4>彩妆</h4>
            </li>-->
        </ul>
    </section>

</div>

<script src="/lib/zepto.min.js"></script>
<script src="/js/frozen.js"></script>
<script src="/js/app.min.js"></script>
<script type="text/javascript">
    var header=$('.J-header'),
        clearBtn=header.find('.ui-icon-close'),
        submitBtn=header.find('.ui-searchbar-submit'),
        input=header.find('.keyword'),
        list= $('.J-history');

    var storage=getItem()||'';
    var historyArr=storage.split(",");

    clearBtn.tap(function () {
        input.val('').focus();
    });

    //搜索
    submitBtn.on('click',function () {
        var val=input.val();

        val&&historyArr.unshift(val);
        historyArr=UniqueArray(historyArr);
        if(historyArr.length>10){
            historyArr=historyArr.slice(0,10);
        }
        setItem(historyArr.join(','));
        Jump('/search-result.html?keyword='+val);
    });

    var lis=[];
    for(var i=0;i<historyArr.length;i++){
        historyArr[i]&&lis.push('<li data-href="/search-result.html?keyword='+historyArr[i]+'" class="af-border-b"><h4>'+historyArr[i]+'</h4></li>');
    }
    if(lis.length){
        list.append(lis.join(''));
        list.show();
    }else{
        list.hide();
    }


    function setItem(data) {
        if (window.localStorage) {
            localStorage.setItem("history", data);
        } else {
            Cookie.write("history", data);
        }
    }

    function getItem() {
        return window.localStorage? localStorage.getItem("history"): Cookie.read("history");
    }

</script>
</body>
</html>